<script setup>
import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { userDetailService } from '@/api/user';
import { getForumArticleListByUserIdService } from '@/api/forumArticle';
import { useTokenStore } from '@/store/token'
import { useUserInfoStore } from '@/store/userInfo'
import { getCurrentInstance } from "vue"
import { useRouter, useRoute } from 'vue-router'
import TopPanel from './TopPanel.vue';
import LeftNav from './LeftNav.vue';

const router = useRouter()
const route = useRoute()

// 获取全局注册的组件
const { proxy } = getCurrentInstance();

// token状态
const tokenStore = useTokenStore();
// 用户信息状态
const userInfoStore = useUserInfoStore();

// 获取用户详细信息
const formData = ref({
  userId: null,
  // pageNum: 1, // 页数
  // pageSize: 10, // 每页条数
  // orderType: 1, // 排序方式（默认为最新）
})
const userDetail = ref({})
const getUserDetail = async () => {
  let res = await userDetailService(formData.value)
  console.log("获取用户详细信息: ", res.data)
  userDetail.value = res.data
}

// 从路由中获取用户ID
watch(
  () => route.params,
  (newValue, oldValue) => {
    console.log("路由参数：", newValue)
    if (newValue == undefined) {
      console.log("当前无路由")
      return
    }
    formData.value.userId = newValue.userId
    getUserDetail()
  },
  { immediate: true, deep: true }
)

// 路由匹配数组
const routeList = ['article', 'comment', 'like']

// 从路由中获取其他
watch(
  () => route,
  (newValue, oldValue) => {
    // 若传递过来的路由中不知道要去哪个路由，默认去userArticle
    if (!routeList.includes(newValue.path.split('/')[newValue.path.split('/').length - 1])) {
      console.log("默认进入article页面")
      router.replace(newValue.path + '/article')
    }
  },
  { immediate: true, deep: true }
)
</script>

<template>
  <div class="user-center">
    <div class="wrapper">
      <!-- 用户中心头部 -->
      <TopPanel :userDetail="userDetail"></TopPanel>
      <!-- 用户中心信息 -->
      <div class="user-center-info">
        <LeftNav></LeftNav>
        <div class="right-content">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.user-center {
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: #f2f3f5;
  min-height: calc(100vh - 60px);
}

.user-center .wrapper {
  width: 1200px;
  margin: 0 auto;
}

/* 用户中心信息 */
.user-center-info {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.user-center-info .right-content {
  background-color: #fff;
  flex: 1;
  margin-left: 20px;
  border-radius: 5px;
}
</style>